<template>

	<van-tabbar class="van-tabbar" v-model="activeTabbar" @change="onTabbarChange" active-color="#f76110"
		inactive-color="#333">
		<van-tabbar-item>
			<template #icon="props">
				<img :src="props.active ?  iconHomeActive : iconHome" />
			</template>
			{{$t('tabbar.Home')}}
		</van-tabbar-item>
		<van-tabbar-item icon="search">
			<template #icon="props">
				<img :src="props.active ? icon2Active  : icon2" />
			</template>
			{{$t('tabbar.Products')}}
		</van-tabbar-item>
		<van-tabbar-item icon="friends-o"  :badge="shopCatNum > 0 ? shopCatNum : ''">
			<template #icon="props">
				<img :src="props.active ?icon3Active   :icon3 " />
			</template>
			{{$t('tabbar.Cart')}}
		</van-tabbar-item>
		<van-tabbar-item icon="setting-o">
			<template #icon="props">
				<img :src="props.active ?icon4Active   :icon4 " />
			</template>
			{{$t('tabbar.Me')}}
		</van-tabbar-item>
	</van-tabbar>
</template>

<script>
	export default {
		data() {
			return {
				activeTabbar: 0,
				iconHome: ``,
				iconHomeActive: ``,
				icon2: ``,
				icon2Active: ``,
				icon3: ``,
				icon3Active: ``,
				icon4: ``,
				icon4Active: ``
			}
		},
		created() {},
		mounted() {},
		methods: {
			onTabbarChange(e) {
				switch (e) {
					case 0:
						this.$router.push('/home')
						break;
					case 1:
						this.$router.push('/shop')
						break;
					case 2:
						this.$router.push('/application')
						break;
					case 3:
					  // if (!this.$tool.isJudgmentLoading()) return;
						this.$router.push('/account')
						break;
				}
			}
		},
		components: {},
		watch: {
			$route(val) { 
				switch (val.path) {
					case '/shopdetail':
						if (this.$refs.tabbarBox) {
							this.$refs.tabbarBox.style.display = 'none'
						}
						break;
					case "/home":
						this.activeTabbar = 0
						break;
					case "/shop":
						this.activeTabbar = 1
						break;
					case "/application":
						this.activeTabbar = 2
						break;
					case "/account":
						this.activeTabbar = 3
						break;
					case "/login":
						this.activeTabbar = 3
						break;
					default:
						this.activeTabbar = 222 // 都不匹配
						if (this.$refs.tabbarBox) {
							this.$refs.tabbarBox.style.display = 'flex'
						}
						break
				}
			}
		},
  computed: { 
		shopCatNum(){
			return this.$store.state.shopCatNum
		}
  }
	}
</script>

<style lang='scss' scoped>
	.van-tabbar {

		display: none;

		/deep/.van-tabbar-item__text {
			font-size: 12px;
		}

		@media screen and (max-width: 900px) {
			display: flex;
		}
	}

	.tabbar-box {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;
		height: 2.1rem;
		border-top: 1px solid #e7e7e7;
		z-index: 199;
		display: none;
		align-items: center;
		background-color: #fff;

		@media screen and (max-width: 900px) {
			display: flex;
		}

		.tabbar-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 12px;
			justify-content: space-between;
			padding: 5px 0 3px;
			height: 100%;
			box-sizing: border-box;
		}
	}
</style>
